<template>
	<view class="" :style="$theme.pageStyle">
		<gb-tab :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="tabtap" style="position:sticky;"></gb-tab>
		
		<view style="margin-top: 150px;" v-if="DataList.length == 0">
			<u-empty
			        mode="data"
			        text="暂无订单数据"
			>
			</u-empty>
		</view>	
		
		<view class="">
			<view v-for="(item , index) in DataList" :key="index">
				<view class="tonggao_item" @click="ToUrl('/course/detail/index?id=' + item.course_id)">
					<view class="tonggao_title flsk">
						<view class="tg_title_text fl-g1">
							订单号: {{item.sn}}
						</view>
						<view>
							<view class="tg_price">
							<span style="font-size: 12px;margin-right: 5px;">¥ </span> {{item.order_amount}}
							</view>
						</view>
					</view>
					<view class="tg_content">
						<view class="tg_content_item flex jsbt w100">
							<view class="tg_content_img">
								<image :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="tg_content_text">
								<view class="text_box u-line-1" style="color: #000;font-size: 16px;font-weight: bold;">
									{{item.name}}
								</view>
								<view class="text_box" style="margin-top: 5px;display: flex;">
									<u-tag text="图文" type="warning" size="mini" plain plainFill v-if="item.type === 1"></u-tag>
									<u-tag text="音频" type="success" size="mini" plain plainFill v-else-if="item.type === 2"></u-tag>
									<u-tag text="视频" type="error" size="mini" plain plainFill v-else-if="item.type === 3"></u-tag>
								</view>
								<view class="text_box u-line-2" style="margin-top: 10px;">
									{{item.create_time}}
								</view>
										
							</view>
							
						</view>
					</view>
					<view class="tg_user flex jsbt w100">
						<view class="tg_user_flex">
							<view class="tg_avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<p>{{item.real_name}}律师</p>
						</view>
						<view class="tg_add_flex" v-if="item.status != 2">
							<u-tag text="未支付" type="warning" size="mini" plain plainFill v-if="item.pay_status == 0"></u-tag>
							<u-tag text="已支付" type="success" size="mini" plain plainFill v-else-if="item.pay_status == 1"></u-tag>
							<u-tag text="已退款" type="error" size="mini" plain plainFill v-else></u-tag>
						</view>
						<view class="tg_add_flex" v-else>
							<u-tag text="已完成" type="success" size="mini" plain plainFill></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 50px;">
			
		</view>
		
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				DataList: [],
				scrollTop: 0,
				tabList: [{
						name: '全部'
					},
					{
						name: '已取消'
					},
					{
						name: '已完成'
					},
					{
						name: '评价'
					}
				],
				tabIndex: 0,
			}
		},
		onLoad(opt) {
			this.timeer()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			// tabbar点击事件
			tabtap(index) {
				if (this.tabIndex != index) {
					this.DataList = [];
					this.tabIndex = index;
					this.timeer()
				}
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/courseOrder', {
						'page': page,
						'limit': this.limit,
						'index': this.tabIndex
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			ToUrl(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.tonggao_item {
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
		display: block;
		margin-bottom: 20px;
		background-color: #FFFFFF;
		margin: 15px;
		position: relative;
	}

	.flsk {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tg_content {
		background: #f8f8f8;
		border-radius: 10px;
		padding: 10px;
		margin: 10px 5px 10px 5px;
	}


	.tg_title_text {
		color: #191919;
		font-weight: 500;
		height: 25px;
		line-height: 25px;
		display: flex;
		.tg_title_images {
			image {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				margin-right: 5px;
				margin-top: 2.5px;
			}
		}
	}

	.fl-g1 {
		flex-grow: 1;
	}

	.tg_price {
		color: #FF5151;
		font-size: 22px;
		font-weight: 600;
		margin-right: 10px;
	}

	.tg_user_flex {
		display: flex;
		width: 70%;
	}

	.tg_add_flex {
		display: flex;
		line-height: 20px;
	}

	.tg_user {
		color: #666666;
		font-size: 12px;
	}

	.tg_avatar image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}

	.icon_realname image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 50%;
	}

	.icon_address image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}

	.tg_user_line {
		width: 1px;
		height: 15px;
		margin: 0 6px;
		background-color: #696969;
	}

	.tg_item_bottom {
		margin-top: 10px;
		margin-bottom: 10px;
		border-top: 1px solid #F1F1F1;
		color: #696969;
		font-size: 12px;
	}

	.tg_content_item {
		padding: 10px 0px 10px 0px;
	}

	.tg_content_text {
		width: 58%;

		.text_box {
			font-size: 14px;
			color: #000;
		}
	}

	.tg_content_img {

		// width: 20%;
		image {
			width: 120px;
			height: 80px;
			border-radius: 8px;
		}
	}

	.text_box {
		color: #666666;
	}


	.fixedbotto {
		display: flex;
		position: fixed;
		top: 88px;
		left: 0;
		width: 100%;
		background: #FFF;
		z-index: 99;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}

	.address_select {
		background: rgba(0, 0, 0, 0.1);
		padding: 5px 10px 5px 10px;
		border-radius: 20px;
	}

	.flex {
		display: flex;
	}

	.jsbt {
		justify-content: space-between;
	}

	.w100 {
		width: 100%;
	}

	.tg_avatar image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}
</style>